<template>
    <!-- 系统风格选择卡片 -->
    <el-card shadow="hover">
        <template #header>
            <div class="card-header">
                <span>风格选择</span>
            </div>
        </template>
        <div class="card-content">
            <!-- 主题模式单选组 -->
            <el-radio-group v-model="radio">
                <el-radio :value="false">浅色模式</el-radio>
                <el-radio :value="true">深色模式</el-radio>
            </el-radio-group>
        </div>
    </el-card>
</template>

<script setup>
// 引入 Element Plus 组件
import { ElCard, ElRadioGroup, ElRadio } from 'element-plus'
// 引入 vueuse 的暗黑模式工具
import { useDark, useToggle } from '@vueuse/core'
// 引入 vue 响应式和监听
import { ref, watch } from 'vue'
// 引入自定义样式存储
import { useStyleStore } from '@/store/UseStyleStore'  // 引入样式存储

const styleStore = useStyleStore()  // 使用样式存储
const isDark = useDark()  // 检测当前是否为深色模式
const toggleDark = useToggle(isDark)  // 用于切换深色和浅色模式

// radio 绑定当前主题模式，初始值取自样式存储
const radio = ref(styleStore.isDark);

// 监听 radio 变化，切换主题并同步到全局样式存储
watch(radio, newValue => {
    if (newValue) {
        styleStore.isDark = true;  // 更新样式存储的状态
        toggleDark(true)  // 切换到深色模式
    } else {
        styleStore.isDark = false;  // 更新样式存储的状态
        toggleDark(false)  // 切换到浅色模式
    }
}, { immediate: true }); 
</script>
